<md-dialog flex="80" class="gis">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>3D Locations({{parentLocation.name}})</h2>
        </div>
    </md-toolbar>

    <md-dialog-content style="padding: 10px;">
        <form novalidate name="tierNameForm">
            <div layout="row" style="width: 43%;">
                <div flex class="fix-line-height" style="text-align: center;">Shelf:</div>
                <md-input-container flex class="md-block">
                    <label>Tier num</label>
                    <input type="text" ng-pattern="/^[0-9]*$/" required ng-model="tierSet.tier" />
                </md-input-container>
                <md-input-container flex class="md-block">
                    <label>Col num</label>
                    <input type="text" ng-pattern="/^[0-9]*$/" required ng-model="tierSet.col" />
                </md-input-container>
            </div>
            <div layout="row" style="width: 72%;">
                <div flex class="fix-line-height" style="text-align: center;">Name:</div>
                <md-input-container flex>
                    <label>Prefix</label>
                    <input type="text" required style="color: #aaa;" ng-model="tierSet.prefix"/>
                </md-input-container>
                <md-input-container flex>
                    <label>Tier Num</label>
                    <input type="text" required ng-pattern="/^[-_]([a-zA-Z0-9]+)*$/" ng-model="tierSet.increase"/>
                </md-input-container>
                <md-input-container flex>
                    <label>Col Num</label>
                    <input type="text" required ng-pattern="/^[-_]([a-zA-Z0-9]+)*$/" ng-model="tierSet.suffix"/>
                </md-input-container>
                <md-input-container flex>
                    <md-button style="margin: 0; padding:0;" class="md-primary" ng-if="tierNameForm.$valid" ng-click="createTable()">
                        <b>create</b>
                    </md-button>
                </md-input-container>
            </div>
        </form>
        <form novalidate name="locSizeForm" ng-if="locSize.currLoc">
            <div layout="row">
                <md-input-container flex style="text-align: center;">
                    <div>Size:</div>
                    <div style="color:blue;">[{{locSize.currLoc.name}}]</div>
                </md-input-container>
                <md-input-container flex>
                    <label>Length</label>
                    <input type="text" required type="number" ng-model="locSize.length" />
                </md-input-container>
                <md-input-container flex>
                    <label>Width</label>
                    <input type="text" required type="number" ng-model="locSize.width"/>
                </md-input-container>
                <md-input-container flex>
                    <label>Height</label>
                    <input type="text" required type="number" ng-model="locSize.height"/>
                </md-input-container>
                <md-input-container flex>
		            <label>Unit</label>
		            <md-select ng-model="locSize.unit" md-container-class="page-front">
		               <md-option value="1">m</md-option>
		               <md-option value="3.28">ft</md-option>
		            </md-select>
		        </md-input-container>
		        <md-checkbox flex md-no-ink aria-label="sync" ng-model="locSize.sync" class="md-primary fix-line-height">
                    Sync to all
                </md-checkbox>
                <md-input-container flex>
		            <md-button style="margin: 0; padding:0;" class="md-primary" ng-disabled="!locSizeForm.$valid" ng-click="setLocSize()">
		                <b>Confirm</b>
		            </md-button>
	            </md-input-container>
            </div>
        </form>
        <div id="tierTable" ng-if="tierData.rowNum.length>0" style="max-height: 300px; padding: 5px; overflow: auto; border: 1px solid #aaa;">
            <table class="tierTable" cellpadding="1" cellspacing="1">
                <tr>
                    <td class='tabHead'></td>
                    <td class='tabHead' ng-repeat="col in tierData.colNum track by $index">{{col}}</td>
                    <td class='tabHead'></td>
                </tr>
                <tr ng-repeat="row in tierData.rowNum track by $index">
                    <td class='tabHead'>{{row}}</td>
                    <td ng-repeat="loc in tierData.rows[row - 1] track by $index">
                        <div ng-if="loc != null && !loc._isDel" ng-click="setLocStatus(loc)" ng-class="{'item-edit' : loc.id}" class="item auto-box">
                            {{loc.name}}
                            <span ng-click="setSize(loc, $event)" class="badge size" ng-class="{'auto-hidden': !loc.length, 'select': loc==locSize.currLoc}">
                                {{loc.length ? (loc.length + "*" + loc.width + "*" + loc.height +" m") : "size"}}
                            </span>
                        </div>
                        <div ng-if="loc == null || loc._isDel" ng-click="setLocStatus(loc)" class="disable">
                            <span class="glyphicon glyphicon-trash"></span>
                        </div>
                    </td>
                    <td class='tabHead'>{{row}}</td>
                </tr>
                <tr>
                    <td class='tabHead'></td>
                    <td class='tabHead' ng-repeat="col in tierData.colNum track by $index">{{col}}</td>
                    <td class='tabHead'></td>
                </tr>
            </table>
        </div>

        <div class="form-group form-self-actions" style="padding-right:75px; margin-top:20px;">
            <button type="submit" class="btn blue" ng-click="saveTierData()">Save</button>
            <button type="button" class="btn default" ng-click="closeGridDialog()">Cancel</button>
        </div>
    </md-dialog-content>

</md-dialog>